<template>
  <div class="header">
    <div class="fxl logo">
      <el-image class="img" :src="logoUrl"></el-image>
      <!--      <span class="tit">{{ systemTitle }}</span>-->
      <i
        class="iconfont ico"
        :class="{
          'icon-zhankai1': menuStatic,
          'icon-zhankai1Left': !menuStatic,
        }"
        @click="change"
      ></i>
    </div>
    <div class="fxr r-menu">
      <el-dropdown>
        <span class="el-dropdown-link sys-menu">
          <el-avatar class="img" :size="30" :src="circleUrl"/>
          {{ userInfo.realname }}
          <el-icon class="el-icon--right">
            <i class="iconfont icon-arrow"></i>
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="modify(2)"
              ><i class="iconfont icon-xiangmupingshen"></i>修改个人资料
            </el-dropdown-item>
            <el-dropdown-item @click="modify(1)"
              ><i class="iconfont icon-xiugaimima2"></i>修改密码
            </el-dropdown-item>
            <el-dropdown-item @click="exit"
              ><i class="iconfont icon-tuichu1"></i>退出
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="460"
      :before-close="handleClose"
    >
      <div class="clarfix">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
        >
          <template v-if="dialogStatic == 1">
            <el-form-item label="原密码" prop="oldPassword">
              <el-input
                type="text"
                placeholder="请输入原密码"
                v-model="ruleForm.oldPassword"
              />
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd">
              <el-input
                type="password"
                placeholder="请输入新密码"
                v-model="ruleForm.newPwd"
              />
            </el-form-item>
            <el-form-item label="新密码确认" prop="affirmPassword">
              <el-input
                type="password"
                placeholder="请确认新密码"
                v-model="ruleForm.affirmPassword"
              />
            </el-form-item>
          </template>
          <template v-if="dialogStatic == 2">
            <el-form-item label="昵称" prop="realname">
              <el-input
                type="text"
                placeholder="请输入昵称"
                v-model="ruleForm.realname"
              />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input
                type="text"
                placeholder="请输入手机号"
                v-model="ruleForm.phone"
              />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input
                type="text"
                placeholder="请输入邮箱"
                v-model="ruleForm.email"
              />
            </el-form-item>
          </template>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

let initData = null;
export default {
  props: {
    systemTitle: {
      type: String,
      default: "祝融赛事平台登陆系统",
    },
  },
  created() {
    initData = {
      ruleForm: JSON.stringify(this.ruleForm),
    };
  },
  data() {
    return {
      dialogTitle: "修改密码",
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      menuStatic: true,
      logoUrl: require("../assets/images/logo.png"),
      circleUrl: "",
      dialogVisible: false,
      dialogStatic: 1,
      ruleForm: {
        realname: "",
        phone: "",
        email: "",

        oldPassword: "",
        newPwd: "",
        affirmPassword: "",
      },
      rules: {},
    };
  },
  // 注入全局变量
  inject: ["imageUrl", "serviceUrl"],
  mounted() {},

  methods: {
    change() {
      this.menuStatic = !this.menuStatic;
      this.$emit("iconChange", this.menuStatic);
    },
    modify(i) {
      this.dialogStatic = i;
      this.ruleForm = JSON.parse(initData.ruleForm);
      this.dialogVisible = true;
      switch (i) {
        case 1:
          this.dialogTitle = "修改密码";
          this.rules = {
            oldPassword: [
              { required: true, message: "请输入原密码", trigger: "blur" },
            ],
            newPwd: [
              { required: true, message: "请输入新密码", trigger: "blur" },
              { min: 6, message: "密码长度最少6字符", trigger: "blur" },
            ],
            affirmPassword: [
              { required: true, message: "请确认新密码", trigger: "blur" },
              { min: 6, message: "密码长度最少6字符", trigger: "blur" },
            ],
          };
          break;
        case 2:
          this.dialogTitle = "修改个人信息";
          this.ruleForm.realname = this.userInfo.realname;
          this.ruleForm.phone = this.userInfo.phone;
          this.ruleForm.email = this.userInfo.email;
          this.rules = {
            realname: {
              required: true,
              message: "请输入昵称",
              trigger: "blur",
            },
            phone: [
              { required: true, message: "请输入手机号", trigger: "blur" },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: "手机号格式不对!",
                trigger: "blur",
              },
            ],
          };
      }
    },
    exit() {
      axios
        .get(this.serviceUrl + "/sys/logout", {
          headers: {
            "X-Access-Token": localStorage.getItem("token"),
          },
          params: { _t: new Date().getTime() },
        })
        .then((resp) => {
          if (resp.data.success) this.$router.push("/login");
        })
        .catch((error) => {
          //console.log(error);
        });
      window.sessionStorage.clear();
      window.localStorage.clear();
    },
    submit() {
      if (this.ruleForm.newPwd != this.ruleForm.affirmPassword) {
        this.$message.warning("两次密码不一致，请重新输入！");
        return;
      }
      let url = "",
        params = {};
      switch (this.dialogStatic) {
        case 1:
          url = "/sys/user/updatePassword";
          params = {
            confirmpassword: this.ruleForm.affirmPassword,
            password: this.ruleForm.newPwd,
            username: this.userInfo.username,
            oldPassword: this.ruleForm.oldPassword,
          };
          break;
        case 2:
          url = "/sys/user/edit";
          params = {
            email: this.ruleForm.email,
            id: this.userInfo.id,
            phone: this.ruleForm.phone,
            realname: this.ruleForm.realname,
          };
          break;
      }
      this.$refs["ruleFormRef"].validate((valid) => {
        if (valid) {
          axios
            .put(
              this.serviceUrl + url,
              { ...params },
              {
                headers: {
                  "X-Access-Token": localStorage.getItem("token"),
                },
              })
              .then((resp) => {
                if (resp.data.code == 200) {
                  if (this.dialogStatic == 1) {
                    this.$router.push("/login");
                    window.sessionStorage.clear()
                    window.localStorage.clear()
                  } else {
                    this.editForm(params)
                    localStorage.setItem(
                        "userInfo",
                        JSON.stringify({...this.userInfo, ...this.ruleForm})
                    );
                    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
                  }
                  this.$message.success(resp.data.message);
                  this.dialogVisible = false
                } else {
                  this.$message.error(resp.data.message);
                }
              })
              .catch((error) => {
                //console.log(error);
              });
        }
      });
    },
    editForm(params) {
      axios.get(this.serviceUrl + "/gerzx2/cbda2Gerzx/getGerxxByUserName", {
        headers: {
          "X-Access-Token": localStorage.getItem("token"),
        },
        params: {
          createBy: this.userInfo.username
        },
      }).then((resp) => {
        console.log(resp,'kkkk');
        if (resp && resp.data.code == 200) {
          axios.get(this.serviceUrl + '/gerzx2/cbda2Gerzx/queryById',{
            headers: {
              "X-Access-Token": localStorage.getItem("token"),
            },
            params:{
              youx: params.email,
              lianxdh: params.phone,
              id: resp.data.result.id
            }
          }).then((resp) => {
            debugger
            console.log(resp);
          })
        }
      })
          .catch((error) => {
            //console.log(error);
          });


    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  background: #e90d00;
  width: 100%;
  height: 60px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .logo {
    display: flex;
    align-items: center;

    i {
      cursor: pointer;
      font-size: 20px;
      margin: 10px 5px 0px 5px;
      opacity: 0.5;
    }

    .img {
      height: 50px;
      margin: 0px 5px 0px 5px;
    }

    .tit {
      font-size: 26px;
      font-weight: bold;
    }
  }

  .r-menu {
    padding: 0px 10px;

    .sys-menu {
      display: flex;
      align-items: center;

      .img {
        margin: 0px 5px 0px 0px;
      }
    }
  }
}

:deep(.el-dropdown) {
  color: #fff;
}

:deep(.el-icon) {
  color: #fff;
  transform: scale(0.7); /* 缩小50% */
}
</style>
